<template>
    <div class="users">
        <!-- 搜索 -->
            <el-input style="width:500px;margin-right:10px" v-model="search"></el-input>
        <el-button type="primary" @click="SearchValue()">
             <el-icon><Search /></el-icon>
        </el-button>

        <!-- 添加 -->
         <el-button type="primary" @click="dialogFormVisible = true"
            >添加用户</el-button
        >
        <!-- 弹框 -->
        <Dialog :dialog="dialogFormVisible" @changed="changed" :form="form" @esc="esc" @add="add" />
        <!-- <el-dialog v-model="dialogFormVisible" title="添加用户">
            <el-form :model="form">
            <el-form-item label="用户名" :label-width="formLabelWidth">
                <el-input v-model="form.username" autocomplete="off" />
            </el-form-item>
            //汪宇涵是你爹
            <el-form-item label="密码" :label-width="formLabelWidth">
                <el-input v-model="form.password" autocomplete="off" />
            </el-form-item>
            <el-form-item label="邮箱" :label-width="formLabelWidth">
                <el-input v-model="form.email" autocomplete="off" />
            </el-form-item>
            <el-form-item label="手机" :label-width="formLabelWidth">
                <el-input v-model="form.mobile" autocomplete="off" />
            </el-form-item>
            </el-form>
            <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="add()"
                >确定</el-button
                >
            </span>
            </template>
        </el-dialog> -->

        <!-- 表格 -->
        <Table :tableData="tableData" @del="del" @change="change" @open="open" />

        <!-- <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="#"/>
            <el-table-column prop="username" label="姓名" />
            <el-table-column prop="email" label="邮箱" />
            <el-table-column prop="mobile" label="电话" />
            <el-table-column prop="role_name" label="角色" />
            
            <el-table-column label="状态" >
                <template #default = "scope">
                    <el-switch
                        @change="change(scope.row)"
                        v-model="scope.row.mg_state"
                        class="ml-2"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                    />
                </template>
            </el-table-column>
            <el-table-column label="操作" width="160">
            <template #default = "scope">
                <el-button type="primary" :icon="Edit" circle />
                 <el-button type="danger" @click="del(scope.row)" :icon="Delete" circle />
                 <el-button type="warning" :icon="Setting" circle />
            </template>
            </el-table-column>
        </el-table> -->

        <!-- 分页 -->
        <el-pagination
        v-model:currentPage="params.pagenum"
        v-model:page-size="params.pagesize"
        :page-sizes="[5, 10, 20, 30]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        />
    </div>
</template>
<script setup>
import Table from '@/components/Table.vue'
import Dialog from '@/components/Dialog.vue'
import { reactive, ref,onMounted,toRefs, activated } from 'vue'
import { getUsers, addUsers, changeSwitch, delUsers, changeUsers }
 from '../../utils/users.js'
import { Search} from '@element-plus/icons-vue'
import { ElMessage,ElMessageBox } from 'element-plus'
import { zhCn } from 'element-plus/es/locale/index.js'
// 添加弹框
const dialogFormVisible = ref(false);
// 宽度
const formLabelWidth = '100px';
// 搜索
const search = ref('');
// 表单
const click = ref('')
// 点击
let form = reactive({
    username:'',
    password:'',
    email:'',
    mobile:''
})
// 总条数
const total = ref(0);
// 分页
const params = reactive( {
    query:'',
    pagesize:5,
    pagenum:1
});zhCn
// 取消
const esc = ()=>{
    dialogFormVisible.value = false;
}
// 表格
const tableData = ref([]);
// 渲染
const getuserList = async ()=>{
    var {data:res} = await getUsers(params);
    total.value = res.total;
    tableData.value = res.users;
    console.log(201,res)
}
// 添加
const add = async ()=>{
    if(form.username == '' || form.password == '' || form.email == '' || form.mobile == ''){
        return ElMessage.warning('输入框不能为空');
    }
    var data = await addUsers(form);
    if(data.meta.status == 201){
        ElMessage.success(data.meta.msg);
        dialogFormVisible.value = false;
        form.username = form.password = form.email = form.mobile = '';
    }
    getuserList();
}

//修改按钮
const open = (row)=>{
    dialogFormVisible.value = true;
    form.username = row.username;
    form.password = row.password;
    form.email = row.email;
    form.mobile = row.mobile;
    form.id = row.id;
}
// 修改
const changed = async()=>{
    // console.log(111)
    let data = await changeUsers(form.id,form);
    console.log(data,'修改')
    if(data.meta.status == 200){
        ElMessage.success(data.meta.msg);
        dialogFormVisible.value = false;
        getuserList();
    }
}
// 分页
const handleSizeChange = (val) => {
    params.pagesize = val;
    getuserList();
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
    params.pagenum = val;
    getuserList();
  console.log(`current page: ${val}`)
}
// 搜索
const SearchValue=()=>{
    // console.log(search.value)
    tableData.value = tableData.value.filter(item=>{
        return item.username.includes(search.value);
    });
    if(search.value == ''){
        getuserList();    
    }
    // search.value = '';
    // console.log(aa)
}
// 修改状态
const change = async (row)=>{
    // console.log(row.mg_state)
    let data = await changeSwitch(row.id,row.mg_state);
    if(data.meta.status == 200){
        ElMessage.success(data.meta.msg)
    }
}
// 删除
const del = async (row)=>{
    ElMessageBox.confirm(
    `您确认删除【${row.username}】吗？删除后无法恢复`,
    '删除', 
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
        var data = await delUsers(row.id)
      ElMessage({
        type: 'success',
        message: data.meta.msg,
      })
      getuserList();
    }).catch(() => {

    })
}

onMounted(() => {
    getuserList();
})



</script>
<style lang="scss" scoped>
    
</style>